{% extends 'admin/article.html' %}

{% block button %}{% endblock button %}

{% block extra_head_style %}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endblock extra_head_style %}

{% if not g.user.is_super_user %}
{% block menus %}
<aside class="menu">
    <p class="menu-label">
        个人中心
    </p>
    <ul class="menu-list">
        <li><a class="{% if request.path == '/auth/' %}is-active{% endif %}"
                href="{{ url_for('auth.userinfo') }}">个人信息</a></li>
        <li>
            <a class="{% if 'collection' in request.path %}is-active{% endif %}" 
                href="{{ url_for('auth.collection') }}">我的收藏</a>
        </li>
        <li>
            <a class="{% if 'mypost' in request.path %}is-active{% endif %}" 
                href="{{ url_for('auth.mypost') }}">我的文章</a>
        </li>
    </ul>
</aside>
{% endblock menus %}
{% endif %}


{% block table_content %}
    <form action="" method="post" class="mt-4">
        {{ form.csrf_token }}
        <div class="field">
            {{ form.title.label(class='label') }}
            <div class="control">
                {{ form.title(class='input', placeholder='标题') }}
            </div>
        </div>
        <div class="field">
            {{ form.desc.label(class='label') }}
            <div class="control">
                {{ form.desc(class='input', placeholder='描述') }}
            </div>
        </div>

        <div class="field">
            {{ form.category_id.label(class='label') }}
            <div class="control">
                <div class="select is-fullwidth">
                    {{ form.category_id }}
                </div>
            </div>
        </div>

        <div class="field">
            {{ form.content.label(class='label') }}
            <div class="control">
                {{ form.content(class='textarea', rows="10", placeholder='文章详情') }}
            </div>
             <!-- 富文本编辑器 -->
            <div id="editor" style="height: 500px;">
            </div>
        </div>

        <div class="field is-horizontal">
            {{ form.has_type.label(class='label') }}
            <div class="field-body ml-4">
                <div class="control">
                    <label class="radio">
                        <input type="radio" name="has_type" value="draft">
                        草稿
                    </label>
                    <label class="radio">
                        <input checked type="radio" name="has_type" value="show">
                        发布
                    </label>
                </div>
            </div>
        </div>
        <div class="is-block">
            <div class="box has-background-light is-shadowless level">
                <button class=" is-danger button level-left">删除</button>
                <div class="level-right">
                    {% if not g.user.is_super_user %}
                    <a href="{{ url_for('admin.article') }}" class="button is-primary is-light mr-2">返回</a>
                    {% else %}
                    <a href="{{ url_for('auth.mypost') }}" class="button is-primary is-light mr-2">返回</a>
                    {% endif %}
                    <input type="submit" value="保存" class=" button is-success">
                </div>
            </div>
        </div>

    </form>
{% endblock table_content %}

{% block extra_foot_script %}
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
{% endblock extra_foot_script %}

{% block vue_script %}
    <script>
    var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike', 'link'],        // toggled buttons
        ['blockquote', 'code-block', 'image'],

        // [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean']                                         // remove formatting button
    ];
    var quill = new Quill('#editor', {
        // debug: 'info',
        modules: {
            toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: 'Compose an epic...',
        readOnly: false,
        formats: {}
    });


    var html = quill.container.firstChild.innerHTML;
    var content = document.querySelector("textarea[name='content']");

    // 隐藏表单
    content.setAttribute('style', 'display:none')
    // 监听富文本并同步到表单
    quill.on('text-change', function (delta, oldDelta, source) {
        content.innerHTML = quill.container.firstChild.innerHTML;
    });

    // 回显内容
    quill.pasteHTML(content.value)

    // 上传图片方法
    var showImageUI = function(){
        var fileInput = this.container.querySelector('input.ql-image[type=file]');
        if (fileInput == null) {
            // 通过js方式构造一个上传表单
            fileInput = document.createElement('input');
            fileInput.setAttribute('type', 'file');
            fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
            fileInput.classList.add('ql-image');

            // 监听change事件
            fileInput.addEventListener('change', function () {
                if (fileInput.files != null && fileInput.files[0] != null) {
                    const formData = new FormData();
                    formData.append('upload', fileInput.files[0]);
                    axios({
                        url:'{{ url_for("admin.upload") }}',
                        method:'post',
                        data:formData,
                        headers:{'content-type': 'multipart/form-data'},
                    }).then(res => {
                        // 返回错误提示
                        if (res.data.code == 'err'){
                            alert(res.data.message)
                            return
                        }
                        // 设置图片回显到富文本编辑器
                        var range = quill.getSelection(true);
                        quill.insertEmbed(range.index, 'image', res.data.url);
                        quill.setSelection(range.index + 1);
                    }).catch(err => {
                        console.log(err)
                    })
                }
            });
            this.container.appendChild(fileInput);
        }
        fileInput.click();
    }

    // 上传图片
    var toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', showImageUI);
    </script>
{% endblock vue_script %}